<template>
  <div>
    <el-table :data="PayLessionList" border style="width: 100%;">
        <el-table-column align="center" prop="index" label="序号" width="150" type="index"></el-table-column>
        <el-table-column align="center" prop="unid" label="收费编号" width="120"></el-table-column>
        <el-table-column align="center" prop="lession.lession_name" label="课程名称" width="120"></el-table-column>
        <el-table-column align="center" prop="lession.lession_type" label="课程类型" width="120">
          <template slot-scope="scope">
            <el-tag type="success" v-if="scope.row.lession.lession_type==1">线上</el-tag>
            <el-tag type="warning" v-if="scope.row.lession.lession_type==2">线下</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="semester.semester_name" label="学期" width="300"></el-table-column>
        <el-table-column prop="status" label="课程状态" width="120">
          <template slot-scope="scope">
			<el-tag type="success" v-if="scope.row.status == 1">启用</el-tag>
			<el-tag type="warning" v-if="scope.row.status == 2">停用</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="pay_mode" label="计费方式" width="120">
          <template slot-scope="scope">
            <el-tag type="success" v-if="scope.row.pay_mode==1">按次收费</el-tag>
            <el-tag type="info" v-if="scope.row.pay_mode==2">按小时收费</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="price" label="课程单价" width="120"></el-table-column>
        <el-table-column align="center" prop="pay_time" label="收费有效期" width="120">
          <template slot-scope="scope">
            <el-tag type="success" v-if="scope.row.pay_time==1">不限制</el-tag>
            <el-tag type="warning" v-if="scope.row.pay_time==2">截止</el-tag>
            <el-tag type="info" v-if="scope.row.pay_time==3">X月内</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="pay_time" label="绑定项目(没有)" width="120"></el-table-column>
        <el-table-column align="center" prop="pay_time" label="授权校区(没有)" width="120"></el-table-column>
        <el-table-column align="center" label="操作" width="145">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="primary" size="small">查看</el-button>
            <el-button @click="open(scope.row)" type="success" size="small" v-if="scope.row.status==2">启用</el-button>
            <el-button @click="stop(scope.row)" type="warning" size="small" v-if="scope.row.status==1">停用</el-button>
          </template>
        </el-table-column>
    </el-table>
    <el-dialog title="新增收费项" :visible.sync="showAdd">
      <add-dig :semester="semester" :list="list" ref="add" :queryFun="queryFun"></add-dig>
    </el-dialog>
  </div>
</template>

<script>
  import { queryLession,queryPayLession,selectPayLession,querySemesterList,queryLessionList,queryLessionById,addPayLession,queryTeachById,getPayItem,queryTeach } from '@/api/studentRecruit.js'
  import { getSessionInfo, delSessionInfo } from '@/utils/auth'
  import addDig from './addPayLession.vue'
  export default {
    name: 'index',
    components:{
      addDig,
    },
    data() {
      return {
        showAdd:false, //弹窗状态
        list:{}, //列表内容
        formData:{
          unid:null,
          lession_id:null, //课程id
          lession_time:null, //课时
          semester_id:null, //学期
          pay_mode:'1', //计费方式 1按次收费 2按小时收费
          is_period:'0', //按期收费
          period:0, //多少小时一期
          price:null, //单价
          pay_time:'1', //收费时间 1不限制 2截止,3X月内
          end_time:null, //结束时间
          month:null, //截止月份
          class_mode:'1', //班型设置 1满班 2小班 3一对一
          small_class:'', //小班人数
          status:'1', //状态 1启用 2不启用
          item:null, //所有收费项目的id ,一维数组
        },
      }
    },
    methods:{
      handleClick(row) {
        //弹窗状态
        this.showAdd = true
        this.list = row
        if(this.showAdd){
          //等弹窗加载完
          this.$nextTick(() => {
            this.$refs.add.clickQuery()
          })
        }
      },
      //启用
      async open(row){
        console.log('启用',row);
        this.formData = row
        this.formData.status = '1'
        let data = await addPayLession(this.formData)
        console.log('data',data);
      },
      //停用
      async stop(row){
        console.log('停用',row);
        this.formData = row
        this.formData.status = '2'
        let data = await addPayLession(this.formData)
        console.log('data',data);
      }
    },
    props:{
      PayLessionList: {
      	type: Array ,
      	default: []
      },
      semester: {
      	type: Array ,
      	default: []
      },
      queryFun:{
        type: Function,
        default: () => {}
      }
    }
  }
</script>

<style>
</style>
